<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />门店
    </view>
    <view class="sousuo">
      <image src="https://pic.bangbangtongcheng.com/static/sousuo2.png" />
      <input type="text" v-model="shopName" placeholder="搜索" />
      <view class="quxiao" @click="searchList">搜索</view>
    </view>
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight1 + 'px - 88rpx - 102rpx - 60rpx )'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
    >
      <view
        class="li"
        v-for="(item, index) in shopList"
        :key="index"
        @click="sureThis(item.id, item.shopName)"
      >
        <view class="fei">
          <image src="https://pic.bangbangtongcheng.com/static/fei_l.png" />
          <p>{{ item.distance }}km</p>
        </view>
        <image :src="imgUrl + item.image" />
        <view class="li_1">
          <view class="tit">{{ item.shopName }}</view>
          <view class="jiedao">地址：{{ item.shopAddress }}</view>
        </view>
      </view>
      <view v-if="shopList.length == 0 && !firstSearch" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="shopList.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    data() {
      return {
        latitude: '', //纬度
        longitude: '', //经度
        pageSize: 10,
        shopName: '',
        pageNo: 1,
        shopList: [],
        statusBarHeight: 0,
        trigger: false,
        downStatus: true,
        upStatus: true,
        imgUrl: this.$imgSrc,
        firstSearch: true,
      }
    },
    onLoad() {
      // if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      // }
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    async onPullDownRefresh() {
      this.shopList = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getShopInfo()
      }
    },
    methods: {
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            // console.log(res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            // _this.openMap();
            _this.getShopInfo()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
              return false
            }
          },
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      down() {
        if (this.downStatus) {
          this.pageNo++
          this.getShopInfo()
        }
      },
      async up() {
        this.shopList = []
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getShopInfo()
        }
      },
      searchList() {
        this.firstSearch = true
        this.pageSize = '10'
        this.pageNo = '1'
        this.getShopInfo(1)
      },
      getShopInfo(type) {
        let that = this
        this.$myRequest
          .get('/mob/user/getShopInfo', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            latitude: this.latitude,
            longitude: this.longitude,
            shopName: this.shopName,
            status: '1',
            shopType: '1',
          })
          .then((res) => {
            uni.hideLoading()
            console.log(res)
            if (res.page.count < this.pageNo * this.pageSize) {
              this.downStatus = false
            } else {
              this.downStatus = true
            }
            if (type) {
              this.shopList = res.page.list
            } else {
              this.shopList = this.shopList.concat(res.page.list)
            }
            this.firstSearch = false
            uni.stopPullDownRefresh()
          })
      },
      sureThis(id, shopName) {
        var pages = getCurrentPages()
        var currPage = pages[pages.length - 1] //当前页面
        var prevPage = pages[pages.length - 2] //上一个页面
        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
        // prevPage.setData({
        //   shopId: id,
        //   shopName: shopName,
        // });
        prevPage.$vm.shopName = shopName
        prevPage.$vm.shopId = id
        uni.navigateBack({
          //uni.navigateTo跳转的返回，默认1为返回上一级
          delta: 1,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    /* position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333; */
    // padding-bottom: 140rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }

  .sousuo {
    position: relative;
    width: 686rpx;
    height: 72rpx;
    margin-top: 30rpx;
    margin-left: 30rpx;
    border: 2rpx solid #64b6a8;
    border-radius: 36rpx;

    image {
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
      margin-top: 12rpx;
    }

    input {
      display: inline-block;
      width: 400rpx;
      height: 50rpx;
      line-height: 52rpx;
      margin-top: 12rpx;
      vertical-align: top;
      font-size: 28rpx;
    }

    .quxiao {
      position: absolute;
      top: 4rpx;
      right: 4rpx;
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #fff;
      text-align: center;
      background: #64b6a8;
      border-radius: 30rpx;
    }
  }

  .list {
    margin-top: 32rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 24rpx;
    }

    .li {
      position: relative;
      width: 96%;
      padding-top: 18rpx;
      padding-bottom: 18rpx;
      border-bottom: 2rpx solid #e0e0e0;

      .fei {
        position: absolute;
        top: 50rpx;
        right: 0;

        image {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          width: 48rpx;
          height: 48rpx;
        }

        p {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      image {
        width: 220rpx;
        height: 140rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 366rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; //想要的行数
          -webkit-box-orient: vertical;
        }

        .jiedao {
          width: 300rpx;
          height: 60rpx;
          font-size: 24rpx;
          margin-bottom: 14rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
